<template>
  <div class="btn">
    <span class="reduce-btn" @click="reduce" v-show="isOpened">-</span>
    <span class="num" v-show="isOpened">{{count}} </span>
    <span class="add-btn" @click="add">+</span>
  </div>
</template>
<script>
export default {
  props:['name','price','imgUrl','id'],
  data() {
    return {
      count:0,
      isOpened:false
    }
  },
  methods: {
    add(){
      if(this.count==0) {
        this.isOpened=true
        this.$emit('createFood',this.name,this.price,this.imgUrl,this.id)
      }
      else {this.$emit('addFood',this.name)}
      this.count++
      this.$emit('changeFood')
    },
    reduce(){
      if(this.count==1) {
        this.isOpened=false
        this.$emit('moveFood',this.name)
        }
        else this.$emit('reduceFood',this.name)
      this.count--
      
      this.$emit('changeFood')
    }
  },
}
</script>

<style lang="less" scoped>
.btn {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .reduce-btn,
  .add-btn {
    width: 15px;
    height: 15px;
    border: 1px solid orange;
    text-align: center;
    line-height: 15px;
    border-radius:3px
  }
  .add-btn{
    background-color: rgba(228, 191, 68, 0.966);
    &:hover{
      opacity: .7;
    }
  }
  
  
}
</style>